<html>
    <head>
        <meta charset="UTF-8" />
        <title></title>
        <!-- import Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
        <style>
            .demo{
                background-color: orange;
            }
        </style>
    </head>
    <body>
        <button id="id">点我创建一个输入框</button>
        <script type="text/javascript">
            const btn = document.getElementById('id');
            btn.onclick = function(){
                const input = document.createElement('input');
                // 以下3行代码，在dom元素插入body前执行，会生效
                input.className = ('demo');
                input.value = 99;
                input.onclick = () => {alert(1)}

                // 如果input.focus()在dom元素插入body前执行，不会生效
                // input.focus();
                document.body.appendChild(input);

                // 以下代码在dom元素插入body后执行，会生效
                input.focus();
                // input.parentElement.style.backgroundColor = 'skyblue';
                // console.log(input.parentElement)
            }
        </script>
    </body>
</html>